<template>
  <div>
    <!-- TODO -> 第一层：在容器中添加路由组件占位符（路由：path: "/"）到页面：component: () => import("@/views/layout/index.vue") -->
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
/**
 * 在 Vue.js 中，router-view 和 router-link 是 Vue Router 提供的两个核心组件，用于实现单页面应用（SPA）中的导航和组件展示。
 *   1. router-view
 *     router-view 是一个特殊的 Vue 组件，用于渲染通过 Vue Router 定义的路由规则中的组件。它会根据当前的 URL 渲染对应的组件。
 *     当 URL 改变时，router-view 会自动更新渲染的组件，而无需重新加载整个页面。
 *     通常，router-view 会被放置在应用的布局组件中，作为页面内容的主要展示区域。
 *   2. router-link
 *     router-link 是 Vue Router 提供的用于创建链接的组件。它相当于 HTML 标签中的 <a> 标签，但可以更智能地处理导航。
 *     使用 router-link 可以避免页面的完全重载，从而提高用户体验和性能。
 *     router-link 的 to 属性用于指定链接的目标地址，可以是字符串或对象形式。
 * 示例代码
 *   1. 假设你有以下的路由配置
 *     const routes = [
 *       { path: "./", component: HomeComponent },
 *       { path: "./about", component: AboutComponent },
 *       { path: "./user/:id", component: UserComponent },
 *     ];
 *   2. 在你的布局组件中，你可以这样使用 router-view 和 router-link
 *     <template>
 *       <div id="app">
 *         <nav>
 *           <router-link to="/">Home</router-link>
 *           <router-link to="/about">About</router-link>
 *           <router-view></router-view>
 *         </nav>
 *       </div>
 *     </template>
 * 在这个例子中，router-link 用于创建导航链接，而 router-view 用于展示根据当前 URL 动态加载的组件。
 */
</script>

<style scoped lang="scss">

</style>
